<template>
    <div>
        <header class="header">
            <div class="header-top">
                <div class="container">
                    <div class="header-top-wrapper">
                        <div class="header-top-left">
                            <div class="header-top-contact">
                                <ul>
                                    <li><a href="javascript:;"><i class="far fa-envelopes"></i>
                                            <span class="__cf_email__"
                                                data-cfemail="93fafdf5fcd3f6ebf2fee3fff6bdf0fcfe">
                                                ifc1242222@17633.com</span></a>
                                    </li>
                                    <li><a href="tel:+21236547898"><i class="far fa-phone-volume"></i> +2
                                            17818962443</a>
                                    </li>
                                    <li><a href="#"><i class="far fa-alarm-clock"></i> 營業時間 : 10:30 - 19:30</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="header-top-right">
                            <div class="header-top-link">
                                <a href="#">中 | EN</a>
                            </div>
                            <div class="header-top-social">
                                <span>關注我們：</span>
                                <a style="margin-left: 0;" href="#"><i class="fab fa-facebook"></i></a>
                                <a href="#"><i class="fab fa-twitter"></i></a>
                                <a href="#"><i class="fab fa-instagram"></i></a>
                                <a href="#"><i class="fab fa-linkedin"></i></a>
                            </div>
                            <a href="/login" class="header-top-login-button">會員登錄</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-navigation">
                <nav class="navbar navbar-expand-lg">
                    <div class="container position-relative">
                        <a class="navbar-brand" href="">
                            <img src="~/static/picture/logo.png" alt="logo">
                        </a>
                        <div class="mobile-menu-right">
                            <div class="search-btn">
                                <button type="button" class="nav-right-link"><i class="far fa-search"></i></button>
                            </div>
                            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                                data-bs-target="#main_nav" aria-expanded="false" aria-label="Toggle navigation">
                                <span class="navbar-toggler-mobile-icon"><i class="far fa-bars"></i></span>
                            </button>
                        </div>
                        <div class="collapse navbar-collapse" id="main_nav">
                            <ul class="navbar-nav">
                                <!-- <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle active" href="#"
                                        data-bs-toggle="dropdown">Home</a>
                                    <ul class="dropdown-menu fade-down">
                                        <li><a class="dropdown-item" href="">Home Page 01</a></li>
                                        <li><a class="dropdown-item" href="index-2.html">Home Page 02</a></li>
                                        <li><a class="dropdown-item" href="index-3.html">Home Page 03</a></li>
                                    </ul>
                                </li> -->
                                <li class="nav-item"><a :class="['nav-link', { active: currentRoute == '/' }]"
                                        href="/">首頁</a></li>
                                <li class="nav-item"><a :class="['nav-link', { active: currentRoute == '/calculator' }]"
                                        href="/calculator">計算器</a></li>
                                <li class="nav-item"><a :class="['nav-link', { active: currentRoute == '/list' }]"
                                        href="/list">精品二手車</a></li>
                                <li class="nav-item"><a
                                        :class="['nav-link', { active: currentRoute == '/article-list' }]"
                                        href="/article-list">展館資訊</a></li>
                                <li class="nav-item"><a :class="['nav-link', { active: currentRoute == '/about' }]"
                                        href="/about">關於我們</a></li>
                            </ul>
                            <div class="nav-right">
                                <div class="search-btn">
                                    <button type="button" class="nav-right-link"><i class="far fa-search"></i></button>
                                </div>
                                <!-- <div class="cart-btn">
                                    <a href="#" class="nav-right-link"><i
                                            class="far fa-cart-plus"></i><span>0</span></a>
                                </div> -->
                                <!-- <div class="nav-right-btn mt-2">
                                    <a href="#" class="theme-btn"><span class="far fa-plus-circle"></span>Add
                                        Listing</a>
                                </div> -->
                                <div class="sidebar-btn">
                                    <button type="button" class="nav-right-link"><i
                                            class="far fa-bars-sort"></i></button>
                                </div>
                            </div>
                        </div>

                        <div class="search-area">
                            <form action="javascript:;">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Type Keyword...">
                                    <button type="submit" class="search-icon-btn"><i class="far fa-search"></i></button>
                                </div>
                            </form>
                        </div>

                    </div>
                </nav>
            </div>
        </header>

        <div class="sidebar-popup">
            <div class="sidebar-wrapper">
                <div class="sidebar-content">
                    <button type="button" class="close-sidebar-popup"><i class="far fa-xmark"></i></button>
                    <div class="sidebar-logo">
                        <img src="~/static/picture/logo.png" alt="">
                    </div>
                    <div class="sidebar-about">
                        <h4>關於我們</h4>
                        <p>There are many variations of passages available sure there majority have suffered alteration
                            in
                            some form by injected humour or randomised words which don't look even slightly believable.
                        </p>
                    </div>
                    <div class="sidebar-contact">
                        <h4>聯係方式</h4>
                        <ul>
                            <li>
                                <h6>郵箱</h6>
                                <a href="javascript:;"><i class="far fa-envelope"></i><span class="__cf_email__"
                                        data-cfemail="4e272028210e2b362f233e222b602d2123">
                                        ifc1242222@17633.com</span></a>
                            </li>
                            <li>
                                <h6>手機</h6>
                                <a href="tel:+21236547898"><i class="far fa-phone"></i> +2 17818962443</a>
                            </li>
                            <li>
                                <h6>營業時間</h6>
                                <a href="#"><i class="far fa-location-dot"></i> 10:30 - 19:30</a>
                            </li>
                        </ul>
                    </div>
                    <div class="sidebar-social">
                        <h4>聯係我們</h4>
                        <a href="#"><i class="fab fa-facebook"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-linkedin"></i></a>
                    </div>
                </div>
            </div>
        </div>

        <main class="main">
            <nuxt />
        </main>

        <footer class="footer-area">
            <div class="footer-widget">
                <div class="container">
                    <div class="row footer-widget-wrapper">
                        <div class="col-md-6 col-lg-4">
                            <div class="footer-widget-box about-us">
                                <a href="#" class="footer-logo">
                                    <img src="~/static/picture/logo-light.png" alt="">
                                </a>
                                <p class="mb-3">
                                    We are many variations of passages available but the majority have suffered
                                    alteration
                                    in some form by injected humour words believable.
                                </p>
                                <ul class="footer-contact">
                                    <li><a href="tel:+21236547898"><i class="far fa-phone"></i>+2 123 654 7898</a></li>
                                    <li><i class="far fa-map-marker-alt"></i>25/B Milford Road, New York</li>
                                    <li><a href="javascript:;"><i class="far fa-envelope"></i><span class="__cf_email__"
                                                data-cfemail="2b42454d446b4e534a465b474e05484446">[email&#160;protected]</span></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-2">
                            <div class="footer-widget-box list">
                                <h4 class="footer-widget-title">Quick Links</h4>
                                <ul class="footer-list">
                                    <li><a href="#">About Us</a></li>
                                    <li><a href="#">Update News</a></li>
                                    <li><a href="#">Testimonials</a></li>
                                    <li><a href="#">Terms Of Service</a></li>
                                    <li><a href="#">Privacy policy</a></li>
                                    <li><a href="#">Our Dealers</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-3">
                            <div class="footer-widget-box list">
                                <h4 class="footer-widget-title">Support Center</h4>
                                <ul class="footer-list">
                                    <li><a href="#">FAQ's</a></li>
                                    <li><a href="#">Affiliates</a></li>
                                    <li><a href="#">Booking Tips</a></li>
                                    <li><a href="#">Sell Vehicles</a></li>
                                    <li><a href="#">Contact Us</a></li>
                                    <li><a href="#">Sitemap</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-3">
                            <div class="footer-widget-box list">
                                <h4 class="footer-widget-title">Follow Us</h4>
                                <div class="footer-newsletter">
                                    <!-- <p>Subscribe Our Newsletter To Get Latest Update And News</p> -->
                                    <!-- <div class="subscribe-form">
                                        <form action="javascript:;">
                                            <input type="email" class="form-control" placeholder="Your Email">
                                            <button class="theme-btn" type="submit">
                                                Subscribe Now <i class="far fa-paper-plane"></i>
                                            </button>
                                        </form>
                                    </div> -->
                                    <a href="#"><i class="fab fa-twitter"></i></a>
                                    <a href="#"><i class="fab fa-instagram"></i></a>
                                    <a href="#"><i class="fab fa-linkedin"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="copyright">
                <div class="container">
                    <div class="row">
                        <p class="copyright-text">
                            &copy; Copyright MOTEX All Rights Reserved.
                        </p>
                    </div>
                </div>
            </div>
        </footer>

        <a href="#" id="scroll-top"><i class="far fa-arrow-up"></i></a>
    </div>
</template>

<script>
export default {
    head() {
        return {
            link: [
                { rel: 'stylesheet', href: '/css/bootstrap.min.css' },
                { rel: 'stylesheet', href: '/css/all-fontawesome.min.css' },
                { rel: 'stylesheet', href: '/css/flaticon.css' },
                { rel: 'stylesheet', href: '/css/animate.min.css' },
                { rel: 'stylesheet', href: '/css/magnific-popup.min.css' },
                { rel: 'stylesheet', href: '/css/owl.carousel.min.css' },
                { rel: 'stylesheet', href: '/css/jquery-ui.min.css' },
                { rel: 'stylesheet', href: '/css/nice-select.min.css' },
                { rel: 'stylesheet', href: '/css/flex-slider.min.css' },
                { rel: 'stylesheet', href: '/css/style.css' },
            ],
            script: [
                { src: '/js/jquery-3.6.0.min.js', type: 'text/javascript', body: true, mode: 'client', defer: true },
                { src: '/js/modernizr.min.js', type: 'text/javascript', body: true, mode: 'client', defer: true },
                { src: '/js/bootstrap.bundle.min.js', type: 'text/javascript', body: true, mode: 'client', defer: true },
                { src: '/js/imagesloaded.pkgd.min.js', type: 'text/javascript', body: true, mode: 'client', defer: true },
                { src: '/js/jquery.magnific-popup.min.js', type: 'text/javascript', body: true, mode: 'client', defer: true },
                { src: '/js/isotope.pkgd.min.js', type: 'text/javascript', body: true, mode: 'client', defer: true },
                { src: '/js/jquery.appear.min.js', type: 'text/javascript', body: true, mode: 'client', defer: true },
                { src: '/js/jquery.easing.min.js', type: 'text/javascript', body: true, mode: 'client', defer: true },
                { src: '/js/owl.carousel.min.js', type: 'text/javascript', body: true, mode: 'client', defer: true },
                { src: '/js/counter-up.js', type: 'text/javascript', body: true, mode: 'client', defer: true },
                { src: '/js/jquery-ui.min.js', type: 'text/javascript', body: true, mode: 'client', defer: true },
                { src: '/js/jquery.nice-select.min.js', type: 'text/javascript', body: true, mode: 'client', defer: true },
                { src: '/js/wow.min.js', type: 'text/javascript', body: true, mode: 'client', defer: true },
                { src: '/js/flex-slider.js', type: 'text/javascript', body: true, mode: 'client', defer: true },
                { src: '/js/main.js', type: 'text/javascript', body: true, mode: 'client', defer: true },
            ],
        };
    },
    data() {
        return {
            currentRoute: '',
        };
    },
    mounted() {
        this.currentRoute = this.$route.path;
    }
}
</script>